<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华猫首页</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="../../css/comment.css">
    <link rel="stylesheet" type="text/css" href="css/indexShop.css">
    <style>
        .aui-list .new-width{
            width: 100%;
        }
    </style>
</head>
<body>
<!--<header id="header" class="aui-bar aui-bar-nav ">-->

    <!--<a href="#" class="aui-pull-left aui-btn ">-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->

    <!--</a>-->
    <!--<div class="aui-title">当面付款</div>-->

<!--</header>-->
<div id="app">


<div class="nav-header">
    <!-- 搜索匡-->
   <ul class="search clearf">
       <!--返回按钮-->
       <li>
            <span class="aui-iconfont aui-icon-left" style="color: #c1c0c1;font-weight: bold"></span>
       </li>
       <!-- 搜索框-->
       <li class="search-min-box">
           <p class="search-icon" @click="searchProduct"><span class="aui-iconfont aui-icon-search" style="color: #c1c0c1;font-weight: bold"></span></p>
           <form action="">

               <input type="text" placeholder="笔记本" v-model="shopProduct" @keyup="searchProduct">
           </form>
       </li>
       <!--icon 分类-->
       <li class="to-top">
           <i class="icons icon-flei"></i>
           <div class="aui-font-size-12">分类</div>
       </li>
       <!--icon 客服-->
       <li class="to-top">

               <i class="icons iocn-custom"></i>
               <div class="aui-font-size-12">客服</div>


       </li>
   </ul>
    <!--店铺信息-->
    <div class="shop-init">
        <div class="shop-logo3"><img src="img/shop-logo3.png" alt="" class="aui-pull-right"></div>
        <div class=" shop-go" >
            <div class="aui-font-size-14" @click="location.href='./shop.html'"> 华硕华猫营... <span class="aui-iconfont aui-icon-right " style="color: #fff; font-weight: bold"> </span></div>
            <div class="HM-btn">华猫自营 </div>
        </div>
    </div>
    <!-- nav -->
    <div class="shop-nav flex" @click="addBorder">
        <!--<div class="item-nav" v-for=" (h,index) in headerArr"> <span :class="{'active':current==index}" @click="current=index">{{h}}</span></div>-->

        <div class="item-nav">  <span class="active">首页</span></div>
        <div class="item-nav">  <span>上新</span></div>
        <div class="item-nav"> <span>全部商品</span> </div>
    </div>

</div>
<!--<div class="aui-searchbar">-->

    <!--<div class="aui-searchbar-input aui-border-radius">-->
        <!--<i class="aui-iconfont aui-icon-search"></i>-->
        <!--<form action="">-->
            <!--<input type="search" id="sea">-->
        <!--</form>-->
    <!--</div>-->
<!--</div>-->
<div id="aui-slide3">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node bg-dark">
            <img src="img/shop-banner.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="img/shop-banner.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="img/shop-banner.png" />
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<section class="aui-clearfix">

    <!--<div class="aui-tab" id="tab">-->
        <!--<div class="aui-tab-item aui-active">首页</div>-->
        <!--<div class="aui-tab-item">上新</div>-->
        <!--<div class="aui-tab-item">全部商品</div>-->

    <!--</div>-->
   <p class="star-product">
       明星单品,购物有惊喜
   </p>


    <div class="product-list2 clearf">


        <div class="f" v-for=" o in shopStore" @click="location.href='../productDetail/detail.html?goodsId='+o.goodsId">
            <div class="img-show">
                <img :src="orImg(o.goodsImg)" :alt="o.goodsName">
            </div>
            <div class="aui-font-size-12 ">

                <span class="aui-ellipsis-3"> <div class="aui-label aui-label-danger aui-font-size-12 aui-margin-r-5">自营</div>{{o.goodsName}}</span>

            </div>
            <div class="aui-font-size-18">
                <span class="aui-text-danger aui-pull-left"> ￥{{o.marketPrice}}</span>
            </div>

        </div>


    </div>
    <div class="loading">
        <img src="../../img/footerIcon1.png" alt=""/>
        <span v-if="totalPage>=pageIndex">上拉加载更多</span>
        <span v-else>没有更多了</span>
    </div>
</section>

<footer>
<div class="foot-bar-box">
    <div class="foot-bar" @click="location.href='../index/classify.html?shopId='+getUrlParam('shopId')">
        <span class="foot-line"></span>
        <span class="foot-line"></span>

        宝贝分类
    </div>
    <div class="foot-bar" @click="shopView(pageIndex,'isHot')">
        <span class="foot-line"></span>
        <span class="foot-line"></span>
        热销商品

    </div>
    <div class="foot-bar" @click="location.href='./shop.html'">
        <span class="foot-line"></span>
        <span class="foot-line"></span>
        店铺详情
    </div>

</div>


</footer>

</div>
<script src="../../js/api.js"></script>
<script src="../../js/aui-slide.js"></script>
<script src="../../js/aui-tab.js"></script>
<script src="../../js/aui-toast.js"></script>
<script src="../../js/aui-scroll.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/vue-resource.min.js"></script>
<script src="../../js/common.js"></script>

<script>

 Vue.nextTick(function () {

      var slide3 = new auiSlide({
          container:document.getElementById("aui-slide3"),
          // "width":300,
          "height":240,
          "speed":500,
          "autoPlay": 3000, //自动播放
          "loop":true,
          "pageShow":true,
          "pageStyle":'dot',
          'dotPosition':'center',


      });

      var scroll = new auiScroll({
          listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
          distance:0 //判断到达底部的距离，isToBottom为true
      },function(ret){
          console.log(ret)
          if(ret.isToBottom){
              if(vm.pageIndex>=vm.totalPage){
                  return false
              }else{
                  vm.pageIndex++;
                  vm.shopView(vm.pageIndex,'')
                  return false;
              }

          }
      });
  });

   var vm= new Vue({
        el:'#app',
        data:{
            pageIndex:1,
            shopStore:[],
            shopProduct:'',
            totalPage:0,
            current:0,
            headerArr:['首页','上新','全部商品']
        },
        mounted:function(){
            this.$nextTick(function () {
                this.shopView(this.pageIndex)
            })
        },
        methods:{
            shopView:function (index,style) {
                 style=style||'';
              //  showDefault('loading','')
                this.$http.get(SURL+'app/Goods/shopGoods',{params:{shopId:getUrlParam('shopId'),pageIndex:index,order:'createTime desc',style:style}}).then(function (res) {
                  // console.log(res);

                   this.totalPage=res.body.data.totalPage;
                    this.shopStore=this.shopStore.concat(res.body.data.maps);
                }).catch(function (res) {
                   console.log(res)


                })
            },
        //    搜索框
            searchProduct:function () {
                this.$http.get(SURL+'app/Goods/searchShopGoods',{params:{shopId:getUrlParam('shopId'),shopName:this.shopProduct}}).then(function (res) {
                    if(res.body.status==1){
                       // alert(1)
                        this.shopStore=res.body.data.maps
                    }
                })

            },
            //热销产品
            addBorder:function () {
               $('.shop-nav').on('click','.item-nav span',function () {
                   $(this).addClass('active') && $(this).parent('.item-nav').siblings('.item-nav').find('span').removeClass('active')
               })
            }

        }
    })
</script>
</body>
</html>